<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 600px;
      margin: 0 auto;

    }
  </style>
</head>

<body>
  <div class="box">
    <h1>修改学生信息</h1>
    <form action="">
      班级：<input id="clazz" type="text"><br>
      姓名：<input id="name" type="text"><br>
      性别：<input id="gender" type="radio" id="option1" name="gender" value="男"><label for="option1">男
        <input type="radio" id="option2" name="gender" value="女">
        <label for="option2">女</label><br>
        年龄：<input id="age" type="text"><br>
        爱好：<label><input type="checkbox" name="hobby" value="sports"> Sports</label>
        <label><input type="checkbox" name="hobby" value="music"> Music</label>
        <label><input type="checkbox" name="hobby" value="books"> Books</label><br>
        电话：<input id="tel" type="number"><br>
        地址：<select name="address" id="address">
          <option value="郑州">郑州</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
        </select><br>
        备注：<input id="remark" type="text"><br>
        入学时间<input id="date" type="date"><br>
        <input id="submit" type="submit" value="提交"><input type="reset" value="清除">
    </form>
  </div>
  <script>

    var userid = decodeURI(document.URL)
    //获取到的数据其实是  ?uname=哈哈哈'
    //下面是对数据进行处理
    userid = userid.slice(userid.indexOf("=") + 1)
    console.log('userid=' + userid);
    var clazz = document.querySelector('#clazz')
    var uname = document.querySelector('#name')
    var gender = document.querySelector('#gender')
    var age = document.querySelector('#age')
    var hobby = document.querySelector('#hobby')
    var tel = document.querySelector('#tel')
    var address = document.querySelector('#address')
    var remark = document.querySelector('#remark')
    var date = document.querySelector('#date')
    var sub = document.querySelector('#submit')
    sub.onclick = function () {
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function () {
        //判断请求状态
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

          }
        }
      }
      xhr.open("POST", 'http://192.168.2.57:3008/api/student/updateStudent')
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send('id=' + userid + '&name=' + uname.value + '&clazz=' + clazz.value + '&gender=' + gender.value + '&age=' + age.value + '&tle=' +
        tel.value + '&address=' + address.value +
        '&remark=' + remark.value)
    }




  </script>
</body>

</html>